<template>
    <div class="mb-5">
        <!-- 卡片标题 -->
        <CardTitle :titles="cardTitleParam.titles" :cardBgColor="cardTitleParam.cardBgColor" @addFrom="openAddDialog" />
        <!-- 卡片列表 -->
        <CardList :cardList="cardListParam.cardList" :operates="cardListParam.operates" :listField="cardListParam.listField"
            @editTemplate="openEditDialog" @delTempplate="openDelDialog" />
    </div>
    <!-- 新增配置 -->
    <MyDialog ref="addDialog" title="新增模板" @cancel="resetForm" @confirm="addTemplate($event)">
        <MyForm ref="myFormRef" :form="addFrom" :rules="rules" labelWidth="80px">
            <el-form-item label="模板标题" prop="keyName">
                <el-input v-model="addFrom.keyName" />
            </el-form-item>
            <el-form-item label="模板类型" prop="value">
                <el-select v-model="addFrom.value" placeholder="请选择模板类型">
                    <el-option v-for="(item, index) in cardListParam.dueDiligenceTemplateTypes" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
        </MyForm>
    </MyDialog>
    <!-- 编辑配置 -->
    <MyDialog ref="editDialog" title="编辑模板" @cancel="resetForm" @confirm="editTemplate($event)">
        <MyForm :form="editFrom" ref="myFormRef" :rules="rules" labelWidth="80px">
            <el-form-item label="模板标题" prop="keyName">
                <el-input v-model="editFrom.keyName" />
            </el-form-item>
            <el-form-item label="模板类型" prop="value">
                <el-select v-model="editFrom.value" placeholder="请选择模板类型">
                    <el-option v-for="(item,index) in cardListParam.dueDiligenceTemplateTypes" :label="item.codeName"
                        :value="item.code" :key="index"/>
                </el-select>
            </el-form-item>
        </MyForm>
    </MyDialog>
    <!-- 删除配置 -->
    <MyMessageBox ref="delMessageBox" @confirm="delTempplate($event)"/>
</template>

<script setup lang="ts">
    import { reactive, ref, getCurrentInstance, unref, onMounted } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import CardTitle from '@/components/CardTitle.vue';
    import CardList from '@/components/CardList.vue';
    import MyForm from '@/components/MyForm.vue'
    import MyDialog from '@/components/MyDialog.vue'
    import MyMessageBox from '@/components/MyMessageBox.vue'
    import moment from 'moment'
    import { List, GetDueDiligenceTemplateTypes, SaveItem, GetById, UpdateConfig, DeleteConfig } from "@/api/due/ReportTemplate.js";
    
    /**
     * form表单引用
     */
    const myFormRef = ref <FormInstance> ()
    /**
     * dislog引用
     */
    const addDialog = ref()
    const editDialog = ref()
    const delMessageBox = ref()

    const { proxy } = getCurrentInstance();
    /**
     * 卡片标题变量
     */
    const cardTitleParam = reactive({
        cardBgColor: "rgb(255, 208, 75)",
        titles: [
            { 'title': '模板标题' },
            { 'title': '模板类型' },
            { 'title': '修改时间' },
            { 'title': '新增模板', 'type': 'button' }
        ]
    })
    /**
     * 卡片列表变量
     */
    const cardListParam = reactive({
        cardList: [],
        listField: ['keyName', 'valueName', 'updatedTime'],
        operates: [
            { 'opeateName': '配置模板及变量', 'opeateMethod': 'editTemplate' },
            { 'opeateName': '删除', 'opeateMethod': 'delTempplate' }
        ],
        dueDiligenceTemplateTypes: []
    })
    const data = reactive({
        deletetId:"",
        test:""
    })
    /**
     * 新增配置表单变量
     */
    const addFrom = reactive({
        sort: 'DUE_DILIGENCE_REPORT_TEMP',
        sortName: '尽调报告模板配置',
        key: '',
        keyName: '',
        value: '',
        valueName: ''
    })
    /**
     * 修改配置表单变量
     */
    const editFrom = ref({})
    /**
     * 初始化加载配置列表
     */
    onMounted(() => {
        queryList()
    })
    /**
     * 打开新增对话框
     */
    const openAddDialog = () => {
        // 查询所有末班类型
        getDueDiligenceTemplateTypes()
        //打开弹出框
        addDialog.value.openDialog()
    }
    /**
     * 打开修改对话框
     */
    const openEditDialog = (id) => {
        // 查询所有末班类型
        getDueDiligenceTemplateTypes()
        // 查询待修改数据
        GetById(id)
            .then((response) => {
                // 编辑数据设置
                editFrom.value = response.data
                // 打开弹出框
                editDialog.value.openDialog()
            }).catch((error) => { });
    }
    /**
     * 打开删除对话框
     */
    const openDelDialog = (id) => {
        data.deletetId = id
        //打开弹出框
        delMessageBox.value.openMessageBox()
    } 
    /**
     * 表单重置
     */
    const resetForm = () => {
        myFormRef.value.resetForm()
    }
    /**
     * 新增配置
     */
    const addTemplate = (e) => {
        myFormRef.value.checkParam()
            .then((res) => {
                SaveItem(addFrom)
                    .then((response) => {
                        ElMessage({
                            message: '新增配置成功！',
                            type: 'success',
                        })
                        // 重置表单
                        myFormRef.value.resetForm()
                        queryList()
                        e.callback(true)
                    }).catch((error) => { });
            })
            .catch((err) => {})
    }
    /**
     * 修改模板配置
     */
    const editTemplate = (e) => {
        myFormRef.value.checkParam()
            .then((res) => {
                UpdateConfig(editFrom.value)
                    .then((response) => {
                        ElMessage({
                            message: '修改增配置成功！',
                            type: 'success',
                        })
                        queryList()
                        e.callback(true)
                    }).catch((error) => { });
            })
            .catch((err) => {})
    }
    /**
     * 删除模板配置
     */
    const delTempplate = (e) => {
        DeleteConfig(data.deletetId)
            .then((response) => {
                queryList()
                e.callback(true)
            }).catch((error) => {
                e.callback(false)
             });
    }
    /**
     * 查询配置列表
     */
    const queryList = () => {
        List()
            .then((response) => {
                const contents = response.data.content.forEach(element => {
                    element.updatedTime = moment(element.updatedTime).format('YYYY-MM-DD')
                });
                cardListParam.cardList = response.data.content
            })
            .catch((error) => { });
    }
    /**
     * 模板类型查询
     */
    const getDueDiligenceTemplateTypes = () => {
        GetDueDiligenceTemplateTypes()
            .then((response) => {
                cardListParam.dueDiligenceTemplateTypes = response.data.content
            })
            .catch((error) => { });
    }
    /**
     * 表单检验规则
     */
    const rules = reactive<FormRules<RuleForm>>({
        keyName: [
            {required:true, message:'模板标题不能为空！', trigger:'blur'}
        ],
        value: [
            {required:true, message:'请选择模板类型！', trigger:'change'}
        ]
    })
</script>

<style scoped></style>